<template>
  <div class="imgWarp">
    <el-image v-if="imgUrl" style="height: 100px;max-width: 100%;" :src="imgUrl" :preview-src-list="[imgUrl]"
      fit="cover">
      <template #placeholder>
        <div class="loading-slot flex-center ">
          <i class="el-icon-loading"></i>
        </div>
      </template>
      <template #error>
        <div class="image-slot flex-center">
          <svgIcon iconClass="img_error" size="80" />
        </div>
      </template>
    </el-image>
    <div v-if="showProgress" class="progress_warp">
      <el-progress :percentage="percentage"></el-progress>
    </div>
  </div>
</template>

<script>
import { APiuploadImg } from "@/api"
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },

  },

  inject: ['WS'],

  data() {
    return {
      imgUrl: "",
      percentage: 60,
      showProgress: false,
      isBlob: false
    }
  },
  created() {
    if (this.item.file) {
      this.imgUrl = window.URL.createObjectURL(this.item.file)
      this.uploadImg(this.item.file)
    }
    // else {
    // this.imgUrl = this.$path + this.item.content
    // }
  },
  methods: {

    setImgUrl() {
      this.imgUrl = this.$path + this.item.content
    },


    uploadImg(file) {
      this.isBlob = true
      this.showProgress = true
      // new AbortController();
      const fd = new FormData()
      fd.append('file', file)
      APiuploadImg(fd, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        timeout: 10 * 60 * 1000,
        // signal: controller.signal,
        onUploadProgress: (progressEvent) => {
          this.percentage = (progressEvent.loaded / progressEvent.total * 100 | 0)
        }
      }).then(res => {

        const parmas = { ...this.item, file: undefined, content: res.data.path }
        console.log('parmas', this.WS)
        this.WS.send(parmas, (ops) => {
          this.showProgress = false
        })
      })
    }
  },
  beforeDestroy() {
    if (this.isBlob) window.URL.revokeObjectURL(this.imgUrl)
  }
}
</script>

<style lang="less">
.imgWarp {
  width: calc(100% - 150px);
  height: 120px;
  position: relative;

  .image-slot,
  .loading-slot {
    width: 100%;
    height: 100%;
    font-size: 26px;
  }

  .progress_warp {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 160px;
    height: 18px;
  }
}

.messageRoom_right {
  .imgWarp {
    display: flex;
    justify-content: flex-end;
  }
}
</style>